---
title: 테마
description: Starlight의 커뮤니티 테마로 문서를 스타일링하세요.
tableOfContents: false
sidebar:
  order: 2
head:
  - tag: style
    content: |
      body { --sl-content-width: 66.75rem; }
---

import ThemeGrid from '~/components/theme-grid.astro';

테마는 [사용자 정의 CSS](/ko/guides/css-and-tailwind/), [컴포넌트 재정의](/ko/guides/overriding-components/) 또는 기타 새로운 기능을 사용하여 사이트의 시각적 모양을 변경하는 Starlight 플러그인입니다.

## 커뮤니티 테마

커뮤니티에서 빌드한 테마를 설치하여 사이트의 모양과 느낌을 빠르게 사용자 정의하세요.

아래에서 모든 테마 목록을 확인하거나 [Starlight 테마 데모 사이트](https://starlight-themes.netlify.app/)에서 직접 사용해 보세요.

<ThemeGrid
	labels={{
		/** 테마 전환을 위한 접근성 레이블입니다. */
		legend: '미리보기',
		/** 어두운 색상 체계 변형에 대한 접근성 레이블입니다. */
		dark: '다크',
		/** 밝은 색상 체계 변형에 대한 접근성 레이블입니다. */
		light: '라이트',
	}}
	themes={[
		{
			title: 'Starlight Rapide',
			description:
				'Visual Studio Code Vitesse 테마에서 영감을 받은 Starlight 테마',
			href: 'https://starlight-theme-rapide.vercel.app/',
			previews: { light: 'rapide-light.png', dark: 'rapide-dark.png' },
		},
		{
			title: 'Starlight Obsidian',
			description:
				'Obsidian Publish 사이트 스타일에서 영감을 받은 Starlight 테마',
			href: 'https://fevol.github.io/starlight-theme-obsidian/',
			previews: { light: 'obsidian-light.png', dark: 'obsidian-dark.png' },
		},
		{
			title: 'Catppuccin for Starlight',
			description: 'Starlight를 위한 편안한 파스텔 테마',
			href: 'https://starlight.catppuccin.com/',
			previews: { light: 'catppuccin-light.png', dark: 'catppuccin-dark.png' },
		},
		{
			title: 'Ion',
			description: 'Starlight를 위한 세련되고 현대적인 테마',
			href: 'https://louisescher.github.io/starlight-ion-theme/',
			previews: { light: 'ion-light.png', dark: 'ion-dark.png' },
		},
		{
			title: 'Starlight Black',
			description: 'shadcn 문서에서 영감을 받은 Starlight 테마',
			href: 'https://starlight-theme-black.vercel.app/',
			previews: { light: 'black-light.png', dark: 'black-dark.png' },
		},
		{
			title: 'Starlight Flexoki',
			description: 'Flexoki 색상 팔레트를 기반으로 한 따뜻하고 친근한 테마',
			href: 'https://delucis.github.io/starlight-theme-flexoki/',
			previews: { light: 'flexoki-light.png', dark: 'flexoki-dark.png' },
		},
		{
			title: 'Starlight Nova',
			description: 'Starlight를 위한 현대적이고 아름다운 테마',
			href: 'https://starlight-theme-nova.pages.dev/',
			previews: { light: 'nova-light.png', dark: 'nova-dark.png' },
		},
		{
			title: 'Starlight Next.js',
			description: 'Next.js 문서에서 영감을 받은 Starlight 테마',
			href: 'https://starlight-theme-next.trueberryless.org/',
			previews: { light: 'nextjs-light.png', dark: 'nextjs-dark.png' },
		},
		{
			title: 'Starlight Galaxy',
			description:
				'문서 및 교육 콘텐츠 게시를 위한 맞춤형 Astro Starlight 테마',
			href: 'https://frostybee.github.io/starlight-theme-galaxy/',
			previews: { light: 'galaxy-light.png', dark: 'galaxy-dark.png' },
		},
		{
			title: 'Starlight Page',
			description:
				'직관적이고 현대적이며, 부드러운 플로팅 애니메이션을 갖춘 Starlight 테마',
			href: 'https://pelagornis-page.netlify.app/',
			previews: { light: 'page-light.png', dark: 'page-dark.png' },
		},
		{
			title: 'Starlight Gruvbox',
			description: 'Starlight를 위한 레트로 그루브 테마',
			href: 'https://starlight-theme-gruvbox.otterlord.dev/',
			previews: { light: 'gruvbox-light.png', dark: 'gruvbox-dark.png' },
		},
		{
			title: 'Starlight Six',
			description:
				'Six Technology가 만든 깔끔하고 현대적인 Astro.js Starlight 테마',
			href: 'https://six-tech.github.io/Six.StarlightTheme/',
			previews: { light: 'six-light.png', dark: 'six-dark.png' },
		},
	]}
/>

:::tip[여러분의 테마를 추가하세요!]
Starlight 테마를 만드셨나요?
이 페이지에 테마를 추가하는 [PR을 여세요](https://github.com/withastro/starlight/blob/main/CONTRIBUTING.md#themes)!
:::
